<template>
  <div class="system-dic-dialog-container">
    <el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="769px">
      <el-form ref="dictDialogFormRef"
               :model="state.ruleForm"
               :rules="state.rules"
               size="default" label-width="90px">
        <el-row :gutter="35">
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
            <el-form-item label="字典名称">
              <el-input v-model="state.ruleForm.name" placeholder="请输入字典名称" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
            <el-form-item label="字典类型">
              <el-input v-model="state.ruleForm.type" :disabled="state.dialog.type === 'edit'"
                        placeholder="类型填写大写的英文，如性别：GENDER" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
            <el-form-item label="字典状态">
              <el-switch v-model='state.ruleForm.status'
                         inline-prompt
                         :active-value='0'
                         :inactive-value='1'/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
            <el-row v-for="(v,k) in state.ruleForm.items" :key="k">
              <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8" class="mb20">
                <el-form-item :prop="`items[${k}].label`">
                  <template #label>
                    <el-button type="primary" circle size="small" @click="onAddRow" v-if="k === 0">
                      <el-icon>
                        <ele-Plus/>
                      </el-icon>
                    </el-button>
                    <el-button type="danger" circle size="small" @click="onDelRow(k)" v-else>
                      <el-icon>
                        <ele-Delete/>
                      </el-icon>
                    </el-button>
                    <span class="ml10">名称</span>
                  </template>
                  <el-input v-model="v.label" style="width: 100%" placeholder="请输入字段名"></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8" class="mb20">
                <el-form-item label="字段" :prop="`items[${k}].value`">
                  <el-input v-model="v.value" style="width: 100%" placeholder="请输入属性值"></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8" class="mb20">
                <el-form-item label="描述" :prop="`items[${k}].remark`">
                  <el-input v-model="v.remark" style="width: 100%" placeholder="请输入描述内容"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
            <el-form-item label="字典描述">
              <el-input v-model="state.ruleForm.remark" type="textarea" placeholder="请输入字典描述"
                        maxlength="150"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel" size="default">取 消</el-button>
					<el-button type="primary" @click="onSubmit" size="default">{{ state.dialog.submitTxt }}</el-button>
				</span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts" name="systemDicDialog">
import {nextTick, reactive, ref} from 'vue';
import {useDictApi} from "/@/api/dict";
import {ElMessage} from "element-plus";

// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);

// 定义变量内容
const dictDialogFormRef = ref();
const state = reactive({
  ruleForm: {
    id: '',
    type: '',// 字典类型
    name: '', // 字典名称
    remark: '', // 字典描述
    status: 0, // 字典状态
    items: [] as DictItemEntity[], // 子集字段 + 属性值
  },
  rules: {
    type: [
      {required: true, message: "请输入字典类型", trigger: "blur"},
      {min: 2, max: 100, message: "字典名称不能为空", trigger: "blur"}
    ],
    name: [
      {required: true, message: "请输入字典名称", trigger: "blur"},
      {min: 2, max: 100, message: "真实姓名不少于2字符", trigger: "blur"}
    ]
  },
  dialog: {
    isShowDialog: false,
    type: '',
    title: '',
    submitTxt: '',
  },
});

// 打开弹窗
const openDialog = (type: string, row: DictEntity) => {
  state.dialog.type = type;
  state.dialog.isShowDialog = true;
  // 避免表单被赋值，导致表单重置不生效的错觉
  nextTick(() => {
    if (type === 'edit') {
      state.ruleForm = row as any;
      state.dialog.title = '修改字典';
      state.dialog.submitTxt = '修 改';
    } else {
      state.dialog.title = '新增字典';
      state.dialog.submitTxt = '新 增';
      dictDialogFormRef.value.resetFields();
      state.ruleForm.items = [
        {dictType: '', label: '', value: ''},
      ];
    }
  });
  state.dialog.isShowDialog = true;
};
// 关闭弹窗
const closeDialog = () => {
  state.dialog.isShowDialog = false;
};
// 取消
const onCancel = () => {
  closeDialog();
};
// 提交
const onSubmit = () => {
  closeDialog();
  console.log("submit：", state.ruleForm);
  // 遍历设置字典类型
  for (let item of state.ruleForm.items) {
    // 字段值是否正确
    if (item.label === '' || item.value === '') {
      ElMessage.warning('字典项信息不完整');
      return;
    }

    item.dictType = state.ruleForm.type;
  }

  // 提交
  if (state.dialog.type === 'edit') {
    useDictApi().updateDict(state.ruleForm).then(res => {
      if (res.code == 0) {
        emit('refresh');
      }
    });
  } else {
    // 默认新增：输出提交内容
    useDictApi().addDict(state.ruleForm).then(res => {
      if (res.code == 0) {
        emit('refresh');
      }
    });
  }
};
// 新增行
const onAddRow = () => {
  state.ruleForm.items.push({
    dictType: '',
    label: '',
    value: ''
  });
};
// 删除行
const onDelRow = (k: number) => {
  state.ruleForm.items.splice(k, 1);
};

// 暴露变量
defineExpose({
  openDialog,
});
</script>
